<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        table tr {
            height: 50px;
            border-bottom: gray 1px solid;
            text-align: center;
            background-color: pink;
        }

        ul {
            border: 1px gray solid;
            width: 500px;
            display: flex;
            justify-content: space-between;
        }

        li {
            list-style: none;
        }
    </style>
</head>


<body>
    <div id="app" class="clearfix">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选中</td>
                    <td>名称</td>
                    <td>描述</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in goodsList" :key="index">
                    <td>{{index + 1}}</td>
                    <td>
                        <input type="checkbox" v-model="item.check">
                    </td>
                    <td>{{item.title}}</td>
                    <td>
                        <img src="https://imedl.sogoucdn.com/cache/skins/uploadImage/2020/05/11/1589197110_former.gif"
                            alt="" :style="{width:'100px'} ">
                    </td>
                    <td>{{item.price}} </td>
                    <td>
                        <!-- v-model.number 用户输入的值转为数据类型 -->
                        <input type="number" min='1' v-model.number="item.count">
                    </td>
                    <td>{{item.price * item.count}}</td>
                    <td>
                        <button @click="goodsList.splice(index,1)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <ul>
            <li>
                <input  v-model="all" id="quan" type="checkbox">
                <label for="quan">全选反选</label>
                <button @click="delCheck">删除选中</button>
            </li>
            <li><span>总数量:{{total}}</span></li>
            <li><span>选中数量:{{checkTotal}}</span></li>
            <li><span>总价值:{{amount}}</span></li>
            <li><span>选中价值:{{checkAmount}}</span></li>

        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            title: "Vue 实现简单的购物车",
            goodsList: [{
                    check: false,
                    title: "上衣",
                    price: 200,
                    count: 10
                },
                {
                    check: true,
                    title: "裤子",
                    price: 100,
                    count: 10
                },
                {
                    check: false,
                    title: "鞋子",
                    price: 500,
                    count: 10
                },
                {
                    check: false,
                    title: "风衣",
                    price: 1000,
                    count: 10
                },
                {
                    check: true,
                    title: "帽子",
                    price: 300,
                    count: 10
                },
                {
                    check: true,
                    title: "西服",
                    price: 2000,
                    count: 10
                },
            ],
            total: 0, //总数量
            checkTotal: 0, //选中数量
            amount: 0, //总价值
            checkAmount: 0 //选中价值

        },
        watch: {
            // goodsList(v){ //浅监听 只会监听第一层的改变(比如数组长度的变化->删除),里面值的改变则监听不了(比如购买数量的增加)
            //     console.log(v);
            // }
            goodsList: { // 深监听 (都能监听到)
                deep: true,
                handler(v) {
                    console.log(v);
                    this.total = 0,
                        this.checkTotal = 0,
                        this.amount = 0,
                        this.checkAmount = 0
                    v.forEach(res => {
                        this.total += res.count;
                        this.amount += res.count * res.price;
                        if (res.check) {
                            this.checkTotal += res.count;
                            this.checkAmount += res.count * res.price;
                        }
                    })
                }
            }

        },
        computed:{
            all:{
                get(){
                    var flag = true;
                    this.goodsList.forEach((res) =>{
                        if(!res.check){
                            flag = false;
                        }
                    })
                    return flag;
                },
                set(v){ // forEach 只是循环遍历数组, map 还会返回一个新的数组
                    console.log(v); //主动改变 状态  
                    this.goodsList.map((res)=>{
                        res.check = v;
                        return res;
                    })
                }
            }
        },
        methods: {
            delCheck(){
                this.goodsList=this.goodsList.filter((res)=>{
                    return (!res.check)
                })
            }

        },
        mounted() {
            document.querySelectorAll('title')[0].innerHTML = this.title;
            this.goodsList.forEach(res => {
                this.total += res.count;
                this.amount += res.count * res.price;
                if (res.check) {
                    this.checkTotal += res.count;
                    this.checkAmount += res.count * res.price;
                }
            })

        }
    }).$mount("#app")
</script>

</html>